<!--  -->
<template>
  <tm-grid :width="width" :col="row" class="hb-gap-3">
    <tm-grid-item
      v-for="(v, i) in result"
      :key="i"
      :height="0"
      _class="hb-relative"
      @click="previewImage(v.tempFilePath as string)"
    >
      <t-image
        :src="v.tempFilePath"
        :height="imageHeight + 'rpx'"
        :width="(imageWidth || imageHeight) + 'rpx'"
        borderRadius="8px"
      ></t-image>
      <view
        v-if="v.progress != 100 || v.isErr"
        class="hb-absolute hb-flex hb-flex-col hb-justify-center hb-items-center hb-w-full hb-h-full"
        style="background: rgba(0, 0, 0, 0.1)"
        :style="{ height: imageHeight + 'rpx', width: imageHeight + 'rpx' }"
        @click.stop="handleReupload(i)"
      >
        <tm-progress
          linear="right"
          showBar
          :width="100"
          :percent="v.progress"
          model="circle"
          :font-size="24"
          percent-suffix="%"
          :height="10"
        ></tm-progress>
        <view v-if="v.isErr">
          <tm-text label="图片上传失败" :font-size="24" color="red"></tm-text>
        </view>
      </view>
      <view
        class="hb-absolute hb-w-5 hb-h-5 hb--right-1 hb--top-1 hb-flex hb-items-center hb-justify-center"
        style="border-radius: 50%; background: rgba(0, 0, 0, 0.3)"
        @click.stop="delResultItem(i)"
      >
        <tm-icon color="white" name="ali-icon icon-guanbi2" :font-size="28"></tm-icon>
      </view>
    </tm-grid-item>
    <view
      v-if="result.length < maxFile"
      class="hb-flex hb-justify-center hb-items-center hb-flex-col"
      :style="{
        height: imageHeight + 'rpx',
        width: (imageWidth || imageHeight) + 'rpx',
        borderRadius: '8px',
        backgroundColor: '#F7F8FA',
      }"
      @click="chooseImage()"
    >
      <tm-icon name="ali-icon icon-xiangji" color="grey"></tm-icon>
      <tm-text
        v-if="showMaxFile"
        color="grey"
        _class="hb-mt-1"
        :label="result.length + '/' + maxFile"
      ></tm-text>
    </view>
  </tm-grid>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { useUpload } from '@/hooks/file/useUpload';
  import { isArray } from 'lodash-es';
  import { PropType } from 'vue';
  import { CropImg } from '@/router/types/modules';

  const props = defineProps({
    modelValue: {
      type: Array as PropType<Array<string> | string>,
      default: () => [],
    },
    width: propTypes.number.def(655),
    row: propTypes.number.def(3),
    imageHeight: propTypes.number.def(204),
    imageWidth: propTypes.number.def(0),
    maxFile: propTypes.number.def(1),
    showMaxFile: propTypes.bool.def(false),
    isCrop: propTypes.bool.def(false),
    cropOptions: Object as PropType<CropImg>,
  });
  const emits = defineEmits(['update:modelValue']);

  const { result, successResult, chooseFile, addResultItem, delResultItem, reupload } = useUpload({
    count: props.maxFile,
    isCrop: props.isCrop,
    cropOptions: props.cropOptions,
  });

  const handleReupload = (i: number) => {
    reupload(i);
  };

  watch(
    () => props.modelValue,
    (val) => {
      let vals = isArray(val) ? val : val.split(',');
      vals.forEach((v) => {
        const item = unref(successResult).find((val) => val.filePath === v);
        if (!item) {
          addResultItem({
            tempFilePath: v,
            filePath: v,
            progress: 100,
            isSuccess: true,
          });
        }
      });
    },
    { deep: true, immediate: true },
  );

  watch(
    () => successResult.value,
    (v) => {
      emits(
        'update:modelValue',
        result.value.map((item) => item.filePath!),
      );
    },
    {
      deep: true,
    },
  );

  function chooseImage() {
    chooseFile({ mediaType: 'image' });
  }

  function previewImage(url: string) {
    uni.previewImage({
      current: url,
      urls: result.value.map((v) => v.tempFilePath as string),
    });
  }
</script>
